<script src="/include/calendar/calendar.js"></script>
<link href="/include/bootstrapadmin/css/morris.css" rel="stylesheet">
<div class="pageheader">
	<h2>
		<i class="fa fa-bar-chart-o"></i>统计管理
	</h2>
	<div class="breadcrumb-wrapper">
		<span class="label">你所在的位置：</span>
		<ol class="breadcrumb">
			<li><a href="/index">ERP管理系统</a></li>
			<li>销售管理</li>
			<li class="active">每周销售量统计</li>
		</ol>
	</div>
</div>
<div class="contentpanel">
	<div class="main">
		<form id="statisticsForm" class="form-inline" method="post" style="margin-bottom: 10px;">
			<div class="form-group">
                <label for="date">日期:</label>
                <input class="form-control" type="text" name="starttime" onclick="new Calendar().show(this);" readonly="readonly" value="<?php echo $this->starttime;?>">
	                        至<input class="form-control" type="text" name="endtime" onclick="new Calendar().show(this);" readonly="readonly" value="<?php echo $this->endtime;?>">
            </div>
			<div class="form-group">
				<label for="Site">网站:</label> 
				<select name="site" class="form-control">
					<option value="">请选择</option>
					<?php
					foreach ( $this->siteArr as $sitev ) {
						if ($this->site == $sitev) {
							echo '<option value="' . $sitev . '" selected="selected">' . $sitev . '</option>';
						} else {
							echo '<option value="' . $sitev . '">' . $sitev . '</option>';
						}
					}
					?>
	            </select>
			</div>
			<button type="submit" class="btn btn-primary">搜索</button>
		</form>
	</div>
	<?php if(empty($this->site)){?>
	<div class="table-responsive">
        <table class="table table-bordered table-hover">
            <thead>
                <tr>
                    <th>类型</th>
                    <th>gogoalshop</th>
                    <th>minejerseys</th>
                    <th>jerseysmark</th>
                    <th>goaljerseys</th>
                    <th>fancybestdeal</th>
                    <th>elmontyouthsoccer</th>
                    <th>bestcheapsoccer</th>
                </tr>
            </thead>
            <tbody>      
                <?php foreach ($this->sum as $typek=>$typev){?>
                <tr>
                    <td><?php if($typek=='money'){echo '总额/美元';}elseif($typek=='order'){echo '订单/个';}elseif($typek=='piece'){echo '商品/件';} ?></td>
                    <td><?php echo empty($typev['gogoalshop'])?0:$typev['gogoalshop']; ?></td>
                    <td><?php echo empty($typev['minejerseys'])?0:$typev['minejerseys']; ?></td>
                    <td><?php echo empty($typev['jerseysmark'])?0:$typev['jerseysmark']; ?></td>
                    <td><?php echo empty($typev['goaljerseys'])?0:$typev['goaljerseys']; ?></td>
                    <td><?php echo empty($typev['fancybestdeal'])?0:$typev['fancybestdeal']; ?></td>
                    <td><?php echo empty($typev['elmontyouthsoccer'])?0:$typev['elmontyouthsoccer']; ?></td>
                    <td><?php echo empty($typev['bestcheapsoccer'])?0:$typev['bestcheapsoccer']; ?></td>
                </tr>
                <?php }?>
                <tr>
                    <td>客单价</td>
                    <td><?php echo round($this->sum['money']['gogoalshop']/$this->sum['order']['gogoalshop'],2); ?></td>
                    <td><?php echo round($this->sum['money']['minejerseys']/$this->sum['order']['minejerseys'],2); ?></td>
                    <td><?php echo round($this->sum['money']['jerseysmark']/$this->sum['order']['jerseysmark'],2); ?></td>
                    <td><?php echo round($this->sum['money']['goaljerseys']/$this->sum['order']['goaljerseys'],2); ?></td>
                    <td><?php echo round($this->sum['money']['fancybestdeal']/$this->sum['order']['fancybestdeal'],2); ?></td>
                    <td><?php echo round($this->sum['money']['elmontyouthsoccer']/$this->sum['order']['elmontyouthsoccer'],2); ?></td>
                    <td><?php echo round($this->sum['money']['bestcheapsoccer']/$this->sum['order']['bestcheapsoccer'],2); ?></td>
                </tr>
		    </tbody>
        </table>
    </div>
    <?php } ?>
    <?php 
	if(!empty($this->site)){
	?>
	<div class="panel panel-default">
		<div class="panel-heading">
			<h4 class="panel-title">7天内成交统计图：<?php echo $this->site; ?></h4>
		</div>
		<div class="panel-body">
			<div class="row">
		    <?php foreach ($this->data[substr($this->site,0,-4)] as $type => $d){ ?>
				<div class="col-md-6 mb30">
					<h5 class="subtitle"><?php if($type=='money'){echo '成交额柱状图';}elseif($type=='order'){echo '成交订单柱状图';}elseif($type=='piece'){echo '成交商品数柱状图';}?></h5>
					<p>
					    <?php if($type=='money'){echo '共计成交额/美元：';}elseif($type=='order'){echo '共计订单/个：';}elseif($type=='piece'){echo '共计成交商品数/件：';}?>
					    <?php 
					    $s = 0;
					    foreach ($d as $dv){ 
					    	$s += $dv;
					    }
					    echo $s;
					    ?>
					</p>
					<div id="<?php echo substr($this->site,0,-4).'-'.$type; ?>" class="body-chart"></div>
				</div>
		    <?php } ?>
			</div>
		</div>
	</div>
	<?php }else{ ?>
	<div class="panel panel-default">
		<div class="panel-heading">
			<h4 class="panel-title">
			<?php echo '合计：成交额$'.$this->total['money'].'；成交订单'.$this->total['order'].'个；成交商品数'.$this->total['piece'].'件'; ?>
			</h4>
		</div>
		<div class="panel-body">
			<div class="row">
			    <?php foreach ($this->sum as $k=>$v){ ?>
				<div class="col-md-6 mb30">
					<h5 class="subtitle mb5"><?php if($k=='money'){echo '成交额饼状图';}elseif($k=='order'){echo '成交订单饼状图';}elseif($k=='piece'){echo '成交商品数饼状图';}?></h5>
					<p class="mb15"></p>
					<div id="<?php if($k=='money'){echo 'piemoney';}elseif($k=='order'){echo 'pieorder';}elseif($k=='piece'){echo 'piepiece';}?>" style="width: 100%; height: 300px"></div>
				</div>
				<?php } ?>
			</div>
		</div>
	</div>
	<?php } ?>
	<div class="panel panel-default">
		<div class="panel-heading">
			<h4 class="panel-title">Flot Charts</h4>
			<p>
				<a target="_blank" href="http://www.flotcharts.org/">Flot</a> is a
				pure JavaScript plotting library for jQuery, with a focus on simple
				usage, attractive looks and interactive features.
			</p>
		</div>
		<div class="panel-body">
			<div class="row">
				<div class="col-md-6 mb30">
					<h5 class="subtitle">Line Chart</h5>
					<p>A line graph is a type of chart which displays information as a
						series of data points connected by straight line segments.</p>
					<div id="line-chart" class="body-chart"></div>
				</div>
				<div class="col-md-6 mb30">
					<h5 class="subtitle mb5">Using Other Symbols</h5>
					<p class="mb15">For other point types, you can define a callback
						function to draw the symbol. Some common symbols are available in
						the symbol plugin.</p>
					<div id="basicflot2" style="width: 100%; height: 300px"></div>
				</div>
			</div>

			<div class="row">
				<div class="col-md-6 mb30">
					<h5 class="subtitle mb5">Pie Chart</h5>
					<p class="mb15">Labels can be hidden if the slice is less than a
						given percentage of the pie.</p>
					<div id="piechart" style="width: 100%; height: 300px"></div>
				</div>
			</div>

		</div>
	</div>
</div>
<script src="/include/bootstrapadmin/js/flot/jquery.flot.min.js"></script>
<script src="/include/bootstrapadmin/js/flot/jquery.flot.resize.min.js"></script>
<script src="/include/bootstrapadmin/js/flot/jquery.flot.symbol.min.js"></script>
<script src="/include/bootstrapadmin/js/flot/jquery.flot.crosshair.min.js"></script>
<script src="/include/bootstrapadmin/js/flot/jquery.flot.categories.min.js"></script>
<script src="/include/bootstrapadmin/js/flot/jquery.flot.pie.min.js"></script>
<script src="/include/bootstrapadmin/js/morris.min.js"></script>
<script src="/include/bootstrapadmin/js/raphael-2.1.0.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
	
	"use strict";
    
    function showTooltip(x, y, contents) {
		jQuery('<div id="tooltip" class="tooltipflot">' + contents + '</div>').css( {
		  position: 'absolute',
		  display: 'none',
		  top: y + 5,
		  left: x + 5
		}).appendTo("body").fadeIn(200);
	 }
    
    /***** PIE CHART *****/
	<?php 
	if(!empty($this->sum)){
		$colors = array('gogoalshop'=>'#428BCA','minejerseys'=>'#1CAF9A','jerseysmark'=>'#F0AD4E','goaljerseys'=>'#428BCA','fancybestdeal'=>'#5BC0DE','elmontyouthsoccer'=>'#F0AD4E','bestcheapsoccer'=>'#1CAF9A');	    
	    foreach ($this->sum as $type => $tv){
	?> 
    var piedata<?php echo $type; ?> = [
        <?php foreach ($tv as $site => $v){ ?>
        { label: "<?php echo $site; ?>", data: [[1,<?php echo $v; ?>]], color: '<?php echo $colors[$site]; ?>'},
        <?php }?>
	 ];
    jQuery.plot('#pie<?php echo $type; ?>', piedata<?php echo $type; ?>, {
        series: {
            pie: {
                show: true,
                radius: 1,
                label: {
                    show: true,
                    radius: 2/3,
                    formatter: labelFormatter,
                    threshold: 0.05
                }
            }
        },
        grid: {
            hoverable: true,
            clickable: true
        }
    });
    <?php  
        } 
    }
    ?>
    
    function labelFormatter(label, series) {
		return "<div style='font-size:8pt; text-align:center; padding:2px; color:white;'>" + label + "<br/>" + Math.round(series.percent) + "%</div>";
	}


    <?php 
    	    if(!empty($this->site)){
    	    	foreach ($this->data as $site => $v){
    	    		foreach ($v as $type => $d){
    	    ?>
    	    var <?php echo $site.$type; ?> = new Morris.Bar({
    	        element: '<?php echo $site.'-'.$type; ?>',
    	        data: [
    	            { y: '1', a: <?php echo empty($d[1])?0:$d[1]; ?> },
    	            { y: '2', a: <?php echo empty($d[2])?0:$d[2]; ?> },
    	            { y: '3', a: <?php echo empty($d[3])?0:$d[3]; ?> },
    	            { y: '4', a: <?php echo empty($d[4])?0:$d[4]; ?> },
    	            { y: '5', a: <?php echo empty($d[5])?0:$d[5]; ?> },
    	            { y: '6', a: <?php echo empty($d[6])?0:$d[6]; ?> },
    	            { y: '7', a: <?php echo empty($d[7])?0:$d[7]; ?> }
    	        ],
    	        xkey: ['y'],
    	        ykeys: ['a' ],
    	        labels: ['<?php echo $type; ?>' ],
    	        barColors: ['#1CAF9A' ],
    	        fillOpacity: 0.8,
    	        smooth: false,
    	        stacked: true,
    	        hideHover: true
    	    });
    	    <?php }?>
    	    jQuery(window).resize(function() {
    			delay(function() {
    				<?php echo $site; ?>money.redraw();
    				<?php echo $site; ?>order.redraw();
    				<?php echo $site; ?>piece.redraw();
    		    }, 200);
    	    }).trigger('resize');
    	    <?php } }?>
    
    
    /***** USING OTHER SYMBOLS *****/
    
    var firefox = [[0, 5], [1, 8], [2,6], [3, 11], [4, 7], [5, 13], [6, 9], [7,8], [8,10], [9,9],[10,13]];
    var chrome = [[0, 3], [1, 6], [2,4], [3, 9], [4, 5], [5, 11], [6, 7], [7,6], [8,8], [9,7],[10,11]];
	
	var plot2 = jQuery.plot(jQuery("#basicflot2"),
		[ { data: firefox,
          label: "Firefox",
          color: "#D9534F",
          points: {
            symbol: "square"
          }
        },
        { data: chrome,
          label: "Chrome",
          color: "#428BCA",
          lines: {
            fill: true
          },
          points: {
            symbol: 'diamond',
            lineWidth: 2
          }
        }
      ],
      {
		  series: {
			 lines: {
            show: true,
            lineWidth: 2
          },
			 points: {
            show: true
          },
          shadowSize: 0
		  },
		  legend: {
          position: 'nw'
        },
		  grid: {
          hoverable: true,
          clickable: true,
          borderColor: '#ddd',
          borderWidth: 1,
          labelMargin: 10,
          backgroundColor: '#fff'
        },
		  yaxis: {
          min: 0,
          max: 15,
          color: '#eee'
        },
        xaxis: {
          color: '#eee',
          max: 10
        }
		});
		
	 var previousPoint2 = null;
	 jQuery("#basicflot2").bind("plothover", function (event, pos, item) {
     jQuery("#x").text(pos.x.toFixed(2));
      jQuery("#y").text(pos.y.toFixed(2));
			
		if(item) {
		  if (previousPoint2 != item.dataIndex) {
			previousPoint2 = item.dataIndex;
						
			jQuery("#tooltip").remove();
			var x = item.datapoint[0].toFixed(2),
			y = item.datapoint[1].toFixed(2);
	 			
			showTooltip(item.pageX, item.pageY,
			item.series.label + " of " + x + " = " + y);
		  }
			
		} else {
		  jQuery("#tooltip").remove();
		  previousPoint2 = null;            
		}
		
	 });
		
	 jQuery("#basicflot2").bind("plotclick", function (event, pos, item) {
		if (item) {
		  plot2.highlight(item.series, item.datapoint);
		}
	 });
    
   
   /***** MORRIS CHARTS *****/
   
   var m1 = new Morris.Line({
        element: 'line-chart',
        data: [
            { y: '2006', a: 30 },
            { y: '2007', a: 75 },
            { y: '2008', a: 50 },
            { y: '2009', a: 75 },
            { y: '2010', a: 50 },
            { y: '2011', a: 75 },
            { y: '2012', a: 100 },
            { y: '2013', a: 120 },
            { y: '2014', a: 95 }
        ],
        xkey: 'y',
        ykeys: ['a'],
        labels: ['Series A'],
        lineColors: ['#428BCA'],
        lineWidth: '2px',
        hideHover: true
    });
   
});		
</script>